<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>渲染英雄列表案例</title>
	<link rel="stylesheet" href="css/hero.css">
</head>

<body>
	<!-- 利用对象数组渲染英雄列表案例 -->
	<ul class="list">
		
		
    <script>
      let datas = [
        { name: '司马懿', imgSrc: './uploads/heros/01.jpg' },
        { name: '女娲', imgSrc: './uploads/heros/02.jpg' },
        { name: '百里守约', imgSrc: './uploads/heros/03.jpg' },
        { name: '亚瑟', imgSrc: './uploads/heros/04.jpg' },
        { name: '虞姬', imgSrc: './uploads/heros/05.jpg' },
        { name: '张良', imgSrc: './uploads/heros/06.jpg' },
        { name: '安其拉', imgSrc: './uploads/heros/07.jpg' },
        { name: '李白', imgSrc: './uploads/heros/08.jpg' },
        { name: '阿珂', imgSrc: './uploads/heros/09.jpg' },
        { name: '墨子', imgSrc: './uploads/heros/10.jpg' },
        { name: '鲁班', imgSrc: './uploads/heros/11.jpg' },
        { name: '嬴政', imgSrc: './uploads/heros/12.jpg' },
        { name: '孙膑', imgSrc: './uploads/heros/13.jpg' },
        { name: '周瑜', imgSrc: './uploads/heros/14.jpg' },
        { name: 'XXX', imgSrc: './uploads/heros/15.jpg' },
        { name: 'XXX', imgSrc: './uploads/heros/16.jpg' },
        { name: 'XXX', imgSrc: './uploads/heros/17.jpg' },
        { name: 'XXX', imgSrc: './uploads/heros/18.jpg' },
        { name: 'XXX', imgSrc: './uploads/heros/19.jpg' },
        { name: 'XXX', imgSrc: './uploads/heros/20.jpg' }
      ]

      for (let i = 0; i < datas.length; i++) {
        document.write(`
        <li>
          <img src=${datas[i].imgSrc} title="${datas[i].name}">
        </li>
        `)
      }
      
    </script>
  </ul>
</body>

</html>